<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="../css/userpage.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
    <style type="text/css">
        ul#nav {
            width: 100%;
            height: 100px;
            margin: 10px auto
        }

        ul#nav li {
            display: inline;
            height: 60px
        }

        ul#nav li a {
            display: inline-block;
            padding: 0 40px;
            height: 60px;
            line-height: 60px;
            color: #FFF;
            font-family: "\5FAE\8F6F\96C5\9ED1";
            font-size: 16px
        }

        ul#nav li a:hover {
            background: #080808
        }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap3.min.js"></script>
    <script src="../bootstrap/js/bootstrap-treeview.min.js"></script>
    <script src="../bootstrap-table/bootstrap-table.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

</head>
<body>
<div class="row" style="margin-bottom: -50px;background-color: #121212;height: 70px" id="menu">
    <div class="col-md-8">
        <ul id="nav">
            <li><a href="/userPage">首页</a></li>
            <li><a href="/contact">关于我们</a></li>
            <li><a href="#">我的订单</a></li>
        </ul>
    </div>
    <div class="col-md-4" style="margin-top: 20px">
        <span class="text-right f20 text-64" id="judgeLogin"></span>
    </div>
</div>

<div class="container" style="margin-top: 50px">
    <div class="col-md-12" id="myTable"></div>
</div>
<!--取消订单的模态框-->
<div class="modal fade" id="myCancelLogModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    取消订单</h4>
            </div>
            <div class="modal-body" id="CancelLogMsg">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="cancelOrder">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div>
<!--    修改的模态框-->
<div class="modal fade" id="myUpdateModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    还车</h4>
            </div>
            <div class="modal-body" id="deleteDialogMsg">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">订单编号</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="cl_id" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">车牌号</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="cl_num" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">驾驶员</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="cl_name" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">出车时间</label>
                        <div class="col-md-9">
                            <div class="input-group date">
                                <input type='text' class="form-control" id="cl_outtime" readonly/>
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">使用单位</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="cl_company" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">使用天数</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control" id="cl_days" readonly/>
                        </div>
                        <h4>天</h4>
                    </div>
                    <!--<div class="form-group">
                        &lt;!&ndash;<label class="col-md-3 control-label">车辆状态</label>&ndash;&gt;
                        <div class="col-md-9">

                        </div>
                    </div>-->
                    <div class="form-group">
                        <input type="hidden" class="form-control" value="2" id="cl_state" />
                        <label class="col-md-3 control-label">油耗</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="cl_oilmoney" readonly/>
                        </div>
                        <h4> /天</h4>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">总额</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="cl_price" readonly/>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" id="updateOrder">
                    还车
                </button>
            </div>
        </div>
    </div>
</div>
<!--footer-->
<div id="gridFooter" class="jz_web_footer g_footer" style="background-color: #121212;position:absolute;top: 100%;width: 100%">
    <div class='jz_web_row_line jz_web_row_line_pc1 '>
        <div id='row4' class='jz_web_row jz_web_row1 jz_web_row_mobi1 jz_section_row'>
            <div class='jz_web_row__content '>
                <div class='jz_web_col jz_web_col0' _index=0>
                    <div class='web_col_content'>
                        <div class='s_footer'>
                            <p class='s_footer_copyright'>©2020 星辰大海-吊装租赁 版权所有</p>
                            <p><span class='s_footer_support'>本站使用<a href='' target='_blank' class='s_footer_anchor jz_hover jz_theme_font_hover_color'><i
                                    class='s_footer_support_icon faisco-icons-S000101'></i>星辰大海</a>搭建</span><span class='s_footer_spance'>|</span><a
                                    href='/login' target='_blank' class='s_footer_anchor jz_hover jz_theme_font_hover_color'
                                    id='adminHref'>管理登录</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    e("<a  class=\"btn btn-link\" href=\"/login\" role=\"button\" style=\"border-style: none;margin-left: 100px;font-size: 18px;color: #cecece;font-weight: 500\">登录</a>\n" +
        "            <a class=\"btn btn-link\" href=\"/registered\" role=\"button\" style=\"border-style: none;font-size: 18px;color: #cecece;font-weight: 500\">注册</a>")

    function e (a){
        var n = $("#judgeLogin");
        var str =window.sessionStorage.getItem("username");
        if (str != null){
            var username = str;
            console.log(username);
            n.append(" <a class='btn btn-link' id='userbtn' href='/userInfo' style='font-size: 15px; border-style: none;color: #cecece;font-weight: 500' >"+username+"</a><a  class='btn btn-link' href='/logout' id='logoutbtn' style='border-style: none;color: #cecece;font-weight: 500' >退出</a>")
        }  else{
            n.append(a);
        }
    };
    $("#menu").mouseover(function () {
        $("#userbtn").removeClass("hidden");
        $("#logoutbtn").removeClass("hidden")
    });
    $("#menu").mouseout(function () {
        $("#userbtn").addClass("hidden");
        $("#logoutbtn").addClass("hidden")
    });
    $("#orderPage").click(function () {

        $(location).attr("href","order")
    });
    $("#userPage").click(function () {
        $(location).attr("href","userPage")
    });
    var cl_id;
    $(document).ready(function () {
        $("#cancelOrder").click(function(){
            $.ajax({
                url: "/carlogs/cancelLog",
                type: "get",
                dataType: "json",
                //序列化,能够传递数组给服务器
                traditional: true,
                data: {
                    cl_id: cl_id
                },
                success: function (result) {
                    alert(JSON.stringify(result));
                    var errorCose = result.errorCode;
                    if (errorCose == 0) {
                        //模态框隐藏
                        $("#myCancelLogModal").modal("hide");
                        //    刷新表格
                        initTable();
                    }
                }
            });
        });
        $("#updateOrder").click(function(){
            $.ajax({
                url:"/carlogs/updateLog",
                type:"post",
                dataType:"json",
                data:{
                    cl_id:$("#cl_id").val(),
                    cl_num:$("#cl_num").val(),
                    cl_name:$("#cl_name").val(),
                    cl_outtime:$("#cl_outtime").val(),
                    cl_company:$("#cl_company").val(),
                    cl_days:$("#cl_days").val(),
                    cl_price:$("#cl_price").val(),
                    cl_state:$("#cl_state").val(),
                    cl_oilmoney:$("#cl_oilmoney").val(),
                },
                success:function(result){
                    if(result.errorCode==0){

                        cl_id:$("#cl_id").val("");
                        cl_num:$("#cl_num").val("");
                        /* cl_name:$("#cl_name").val("");*/
                        cl_outtime:$("#cl_outtime").val("");
                        cl_company:$("#cl_company").val("");
                        cl_days:$("#cl_days").val("");
                        cl_price:$("#cl_price").val("");
                        cl_state:$("#cl_state").val("");
                        cl_oilmoney:$("#cl_oilmoney").val("");
                        cl_des:$("#cl_des").val("");
                        $("#myUpdateModal").modal("hide");
                    }
                }
            });
            $.ajax({
                url:"/staff/bringCarStaff",
                type:"post",
                dataType:"json",
                data:{
                    s_name:$("#cl_name").val(),
                },
                success:function(result){
                    if(result.errorCode==0){
                        alert("还车成功，欢迎下次使用！");
                        $("#bringdata")
                    }
                }
            });
        });

        $("#usemoney").click(function(){
            var money2=$("#cl_oilmoney").val()*$("#cl_days").val();
            var money1=$("#cl_price").val()*$("#cl_days").val();
            var money=money1+money2*1;
            $("#cl_des").val(money);
            alert("您的订单预计消费"+money+"元"+",若继续使用则点击下单，否则取消！")
        });
        initTable();

        function initTable() {
            //让bookstraptable销毁
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "/carlogs/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                // silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                // showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行//height: 1000,  //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "cl_id", //每一行的唯一标识，一般为主键列
                //showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                queryParams: function getParams(params) {
                    return {
                        username:window.sessionStorage.getItem("username")
                    }
                },
                columns: [

                    {
                        title: "全选",
                        field: "select",
                        checkbox: true,
                        width: 20,//宽度
                        align: "center",//水平
                        valign: "middle"//垂直

                    },
                    {
                        field: 'cl_num',//JSon数据中的相应的key
                        title: '车牌号',//表头信息
                        sortable: true,
                        width: 200,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'cl_name',
                        title: '驾驶员姓名',
                        sortable: true,
                        width: 200,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'cl_outtime',
                        title: '出车日期',
                        sortable: true,
                        width: 200,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'cl_company',
                        title: '使用单位',
                        width: 200,
                        align: 'center',
                        sortable: true,
                        valign: 'middle',
                    },
                    {
                        field: 'cl_days',
                        title: '使用天数',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',

                    },

                    {
                        field: 'cl_oilmoney',
                        title: '油耗单价',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'cl_price',
                        title: '消费总额',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',

                    },

                    {
                        title: "操作",
                        width: 200,
                        align: 'center',
                        valign: 'middle',
                        //如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        events: operateEvents,
                        //添加按钮
                        formatter: function (value, row, index) {
                            return "<button class='btn btn-info  btn-sm updateCarLog' id='bringCar'><i class='fa fa-pencil-square-o' aria-hidden='true'></i>还车</button>&nbsp;&nbsp;&nbsp;<button class='btn btn-warning btn-sm cancelCarLog'> <i class='fa fa-trash' aria-hidden='true'></i> 取消</button>"
                        }
                    }

                ],
                //    复选框居中显示
                onLoadSuccess: function () {
                    //复选框的居中样式，自定义一个复选框的CSS样式，代替了BootStrap的默认样式
                    $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                },
            });

        }


    });
    //注册按钮事件
    window.operateEvents = {
        'click .updateCarLog': function (e, value, row, index) {
            $("#myUpdateModal").modal("show");
            $("#cl_id").val(row.cl_id);
            //    查询该车数据，并加载到模态框中
            $.ajax({
                url: "/carlogs/selectById",
                type: "post",
                dataType: "json",
                //序列化,能够传递数组给服务器
                traditional: true,
                data: {
                    id: row.cl_id
                },
                success: function (result) {
                    // alert(JSON.stringify(result));
                    var errorCode = result.errorCode;
                    if (errorCode == 0) {
                        $("#cl_id").val(result.object.cl_id);
                        $("#cl_num").val(result.object.cl_num);
                        $("#cl_name").val(result.object.cl_name);
                        $("#cl_outtime").val(result.object.cl_outtime);
                        $("#cl_company").val(result.object.cl_company);
                        $("#cl_days").val(result.object.cl_days);
                        $("#cl_price").val(result.object.cl_price);
                        $("#cl_state").val(2);
                        $("#cl_oilmoney").val(result.object.cl_oilmoney);
                    }

                }
            });


        },
        'click .cancelCarLog': function (e, value, row, index) {
            cl_id = row.cl_id;
            $("#myCancelLogModal").modal("show");
            $("#CancelLogMsg").html("确定取消第：" + cl_id + "记录?");
        }
    }
</script>
</body>
</html>